<!doctype html>
<html>
  <head>
    <title>PGlite COPY Example</title>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./utils.js"></script>
    <script type="importmap">
      {
        "imports": {
          "@electric-sql/pglite": "../dist/index.js"
        }
      }
    </script>
  </head>
<body>
<h1>PGlite <code>COPY</code> Example</h1>
<div class="script-plus-log">
<script type="module">
import { PGlite } from "@electric-sql/pglite";

const pg = new PGlite();

await pg.exec(`
  CREATE TABLE IF NOT EXISTS test (
    id SERIAL PRIMARY KEY,
    name TEXT
  );
`);

// add 1000 rows:
await pg.exec("INSERT INTO test (name) SELECT 'name' || i FROM generate_series(1, 1000) i;");

// Copy the date to a file:
console.log('Copying data to file...') // 'test.csv
const ret = await pg.query("COPY test TO '/dev/blob' WITH (FORMAT binary);");

console.log('Data copied to blob:')
const blob = ret.blob;
console.log(blob);

// Download the file:
const a = document.createElement('a');
a.href = URL.createObjectURL(new File([blob], 'test.csv', { type: 'text/csv' }));
a.download = 'test.csv';
a.click();

// Other table
await pg.exec(`
  CREATE TABLE IF NOT EXISTS test2 (
    id SERIAL PRIMARY KEY,
    name TEXT
  );
`);

// import the data from the file:
console.log('Importing data from file...')
const ret2 = await pg.query("COPY test2 FROM '/dev/blob' WITH (FORMAT binary);", [], {
  blob: blob
});

console.log('Data imported from file:')
const ret3 = await pg.query("SELECT * FROM test2;", []);
console.log(ret3.rows);

</script>
<div id="log"></div>
</div>
</body>
</html>
